import React from 'react';
import { Group, TextField ,Table, Button} from 'saltui';
import { history } from 'umi';
import './index.less'
const numberRegExp = /^(\d+\.\d*)|(\d+\.)|\d+/;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      t1: '',
      t2: '',
      number: '',

      // data: {
      //   data: [
      //     {
      //       title: '人物1',
      //       nameId: 'xiaowang',
      //       day: '开始日期',
      //       workId: 'bj',
      //       work: '北京',
      //       sex: '女',
      //       age: '16',
      //     },
          
      //   ],
      // },
      data2: {
        data: [
          {
            endday: '2022-9-28',
            nameId: '是不会变得说不出街道办事处比较说的ng',
            day: '2022-9-25',
            cityId: 'bj',
            work: '入司培训',
            sex: '女',
            cate:'基础课程',
            method:'讲授'
          },
          
        ],
     
      },
      // columns: [
      //       { dataKey: 'title', title: '表头', align: 'center' },
      //       { dataKey: 'day', title: '姓名', align: 'center' },
      //       { dataKey: 'sex', title: '性别', align: 'center' },
      //       { dataKey: 'age', title: '邮件', align: 'center' },
      //       { dataKey: 'work', title: '城市', align: 'center' },
      // ],
      columns2: [
            { dataKey: 'work', title: '培训名称', align: 'center' },
            { dataKey: 'day', title: '开始日期', align: 'center' },
            { dataKey: 'endday', title: '结束日期', align: 'center' },
            { dataKey: 'cate', title: '课程分类', align: 'center' },
            { dataKey: 'method', title: '培训方式', align: 'center' },
      ],
    };
  }


  handleTextChange(name, newValue) {
    this.setState({
      [name]: newValue,
    });
    if (newValue.length > 5) {
      this.setState({
        errMsg: '最多输入5个字',
      });
    } else {
      this.setState({
        errMsg: null,
      });
    }
  }

  handleNumberChange(newValue) {
    this.setState({
      number: newValue,
    });
  }

  numberFilter(originValue) {
    const matches = originValue.match(numberRegExp);
    let number = '';
    if (matches) {
      number = matches[0];
    }
    return number;
  }

  handleNumberBlur(originValue) {
    this.setState({
      number: originValue.replace(/\.$/, '').replace(/^0*([0-9]+)/, '$1'),
    });
  }

  // handleClick(path) {
  //   // console.log(props);
  //   console.log(path);
    
  //   location.push=(path)
  // }


  render() {
    const t = this;
    const data = {
      data: [],
    };
    return (
      <div>
        <Group.List >
          <TextField
            label="培训名称"
            placeholder="请填写"
            value={t.state.t1}
            tip="课程类型"
            onChange={(value) => { t.handleTextChange('t1', value); }}
          />
          <TextField
            label="参与人" placeholder="请填写"
            filter={value => t.numberFilter(value)}
            value={t.state.number}
            onBlur={(value) => { t.handleNumberBlur(value); }}
            onChange={(value) => { t.handleNumberChange(value); }}
          />
        </Group.List>

        <Table
          columns={t.state.columns2}
          data={t.state.data2}
          leftFixed={0}
        />

        <Button  onClick={()=>{history.push('/user')}} type="primary" size="small" display="inline">新增</Button>
        <Button  onClick={()=>{history.push('/home')}} type="primary" size="small" display="inline">首页</Button>
      </div>
    );
  }
}

// ReactDOM.render(<Demo />, mountNode);

export default Demo;
